<template>
	<view>
		<!-- 产品轮播 -->
		<view class="cplb">
			<u-swiper :list="goodsInfo.images" bg-color="#ffffff"  img-mode="aspectFit" interval='4000' height="730" border-radius='0' @click="onGoodsSwiper"></u-swiper>
		</view>
		<!-- 产品价格 -->
		<view class="cpjg" style="align-items: flex-end;">
			<view class="xin" style="    display: flex; align-items: flex-end;">
				¥{{ goodsInfo.price }}
				<text style="margin-left: 10rpx;" v-if="isLogin">
					{{users.group.name}}折后价
				</text>
			</view><text v-show=" goodsInfo.original_price != 0">¥{{ goodsInfo.original_price }}</text>
		</view>
		<!-- 产品信息部分 -->
		<view class="contents ">
			<!-- 产品信息部分 -->
			<view class="namel">
				<!-- 领券信息 -->
				<view class="lqxx">
					<view class="" v-for="(item,index) in goodsInfo.coupons" :key="index">
							{{item.name}}
					</view>
				</view>
				<!-- 会员折扣 -->
				<view class="huiyuze" v-if="isLogin &&  goodsInfo.is_group_level_discount==1 && users.group.name!='大众会员'">
					<view class="">
						<image src="https://s1.ax1x.com/2022/07/14/jfEifx.png" mode=""></image>{{users.group.name}} 
					</view>
						{{goodsInfo.current_discount}}折优惠
				</view>
				<!-- 产品名称 -->
				<view class="cpname">
					{{ goodsInfo.title }}
				</view>
				<!-- 产品描述 -->
				<view class="cpmiaosu">
					{{ goodsInfo.subtitle }}
				</view>
				<!-- 月销量和分享 -->
				<view class="yxfx">
					<view class="">
						月销 {{ goodsInfo.sales }} +
					</view>
					<view class="" @tap="onShare">
						<image src="https://s1.ax1x.com/2022/03/31/qR7Nct.png" mode=""></image> 分享
					</view>
				</view>
				<!-- 跳转领券 -->
				<view class="tzlq" @click="lqtz">
					领券 <u-icon color="#ffffff" size="24" name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 规格参数 -->
			<view class="ggcs">
				<view class="ggcsitem" @click="showSkuShow()" v-if="activityRules.status !== 'waiting' && checkActivity(goodsInfo.activity_type, 'groupon') && goodsInfo.is_sku">
					<view class="">
						<text>规格</text>
						<view class="gguige">
							{{ currentSkuText || '请选择规格' }}
						</view>
					</view>
					<u-icon color="#999999" size="28" name="arrow-right"></u-icon>
				</view>
				<view class="ggcsitem">
					<view class="">
						<text>发货</text>
						<view class="">
							泰安
						</view>
					</view>
				</view>
				<view class="ggcsitem">
					<view class="">
						<text>配送</text>
						<view class="">
							邮费12.00
						</view>
					</view>
				</view>
				<view class="ggcsitem" @click="showGuarantee = true">
					<view class="">
						<text>保障</text>
						<view class="">
							<text v-for="(item,index) in goodsInfo.service">{{item.name}}</text>
						</view>
					</view>
					<u-icon color="#999999" size="28" name="arrow-right"></u-icon>
				</view>
				<view class="ggcsitem" @click="showBrand = true">
					<view class="" style="width: 95%;">
						<text>参数</text>
						<view class="u-line-1 sc" >
							<text v-for="(item,index) in goodsInfo.params">{{item.title}}</text>
						</view>
					</view>
					<u-icon color="#999999" size="28" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="spxqk">
			<!-- 商品详情标题 -->
			<view class="sptitlt">
				商品详情
			</view>
			<view class="spcontent">
				<u-parse :html="goodsInfo.content"></u-parse>
			</view>
		</view>
		<!-- 加入购物车收藏 -->
		<!-- <view class="detail-btn-box" v-if="detailType === 'score'"><button class="u-reset-button  score-btn" @tap="goPay">立即兑换</button></view>
		<view class="jrsc" v-if="detailType !== 'score'">
			<view class="ss">
				<view class="" @click="indexs()">
					<u-icon name="home-fill" size="40" color="#D0D0D2"></u-icon>
					<view class="">
						首页
					</view>
				</view>
				<view class="" @click="setsc(datas.id)">
					<u-icon v-if="!datas.favorite" size="40" color="#D0D0D2" name="star-fill"></u-icon>
					<u-icon v-else size="40" name="star-fill" color="#FF9A33"></u-icon>
					<view class="">
						收藏
					</view>
				</view>
			</view>
			
			<view class="ljgm" v-if="!goodsInfo.activity_type">
				<view class="" @tap="addCart">
					加入购物车
				</view>
				<view class="" @tap="goPay">
					立即购买
				</view>
			</view>
		</view> -->
		<view class="tabbar-foot safe-area-inset-bottom" v-if="goodsInfo.id">
			<view class="detail-foot_box safe-area-inset-bottom  u-flex u-col-ceter u-row-around">
				<!-- foot左侧 -->
				<view class="left u-flex" style="margin-right: 10px;">
					<!-- 积分foot -->
					<view class="tools-item u-flex-col u-row-center u-col-center" @tap="goHome">
						<u-icon name="home-fill" size="40" color="#D0D0D2"></u-icon>
						<text class="tool-title shopro-selector-rect">首页</text>
					</view>
					<!-- 非积分foot -->
					<block v-if="detailType !== 'score'">
						<view class="tools-item u-flex-col u-row-center u-col-center" @tap="onFavorite(goodsInfo.id)">
							<!-- <image
								class="tool-img"
								:src="Boolean(goodsInfo.favorite) ? $IMG_URL + '/imgs/detail/detail_favorite_end.png' : $IMG_URL + '/imgs/detail/detail_favorite.png'"
								mode=""
							></image> -->
							
							<u-icon  size="40" :color="Boolean(goodsInfo.favorite) ? '#FF9A33' :'#D0D0D2'" name="star-fill"></u-icon>
							<text class="tool-title" :style="Boolean(goodsInfo.favorite) ? ' color:#FF9A33' :''"  >{{Boolean(goodsInfo.favorite) ? '已收藏' :'收藏'}}</text>
						</view>
						<!-- <view class="tools-item u-flex-col u-row-center u-col-center" @tap="onShare">
							<image class="tool-img" :src="$IMG_URL + '/imgs/share/share.png'" mode=""></image>
							<text class="tool-title">分享</text>
						</view> -->
					</block>
				</view>
				<!-- foot右侧 -->
				<view class="detail-right">
					<!-- 积分按钮 -->
					<view class="detail-btn-box" v-if="detailType === 'score'"><button class="u-reset-button score-btn" @tap="goPay">立即兑换</button></view>
					<view v-if="detailType !== 'score'">
						<!-- 正常按钮 -->
						<view class="detail-btn-box u-flex u-row-around" v-if="!goodsInfo.activity_type">
							<button class=" u-reset-button tool-btn add-btn" @tap="addCart">加入购物车</button>
							<button class=" u-reset-button tool-btn pay-btn" @tap="goPay">立即购买</button>
						</view>
						<!-- 活动按钮 -->
						<view class="detail-btn-box u-row-around" v-if="activityRules.status && goodsInfo.activity_type">
							<button class=" u-reset-button seckilled-btn" v-if="activityRules.status !== 'ing'">
								<text v-if="activityRules.status == 'waiting'">暂未开始</text>
								<text v-if="activityRules.status == 'end'">已结束</text>
							</button>
							<block v-else>
								<!-- 活动中，秒杀 -->
								<button class=" u-reset-button  seckill-btn" v-if="goodsInfo.activity && goodsInfo.activity.type === 'seckill'" @tap="goSeckill">
									立即秒杀
								</button>
								<!-- 活动中，拼团 -->
								<view class="u-flex groupon-btn-box" v-if="goodsInfo.activity && goodsInfo.activity.type === 'groupon'">
									<button
										class="tool-btn u-reset-button add-btn u-flex-col u-row-center u-col-center"
										@tap="payGroupon"
										v-if="goodsInfo.activity.rules.is_alone === '1'"
									>
										<text class="price font-OPPOSANS">￥{{ goodsInfo.price }}</text>
										<text class="price-title">单独购买</text>
									</button>
									<button
										class=" tool-btn u-reset-button groupon-btn u-flex-col u-row-center u-col-center"
										:style="goodsInfo.activity.rules.is_alone === '0' ? 'width:400rpx' : ''"
										@tap="payGroupon('groupon')"
									>
										<text class="price font-OPPOSANS">￥{{ goodsInfo.groupon_price }}</text>
										<text class="price-title">我要开团</text>
									</button>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 规格弹窗 -->
		<shopro-sku
			v-if="showSku && goodsInfo.id"
			v-model="showSku"
			:goodsInfo="goodsInfo"
			:activityRules="activityRules"
			:buyType="goodsInfo.activity_type == 'seckill' || detailType === 'score' ? 'buy' : buyType"
			:grouponBuyType="grouponBuyType"
			:goodsType="detailType === 'score' ? 'score' : 'goods'"
			@changeType="changeType"
			@getSkuText="getSkuText"
		></shopro-sku>
		
		<!-- 登录 -->
		<!-- 	分享组件 -->
		<shopro-share v-model="showShare" :posterInfo="goodsInfo" :posterType="'goods'"></shopro-share>
		
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- 保障 -->
		<u-popup v-model="showGuarantee" mode="bottom"
		 :safe-area-inset-bottom="true" :closeable="true">
				
				<view class=" server-modal">
					<view class="server-modal-box page_box">
						<view class="modal-head u-flex u-row-center u-col-center"><text class="head-title">服务保障</text></view>
						<view class="modal-content content_box">
							<view class="serve-list" v-for="serve in goodsInfo.service" :key="serve.title">
								<view class="title-box u-flex">
									<image class="title-tag" :src="serve.image" mode=""></image>
									<text class="serve-title">{{ serve.name }}</text>
								</view>
								<view class="serve-detail">{{ serve.description }}</view>
							</view>
						</view>
						<view class="modal-foot u-flex u-row-center u-col-center" >
							<button class="u-reset-button serve-btn" @click.stop="showGuarantee = false">确定</button>
						</view>
					</view>
				</view>
		</u-popup>
		<!-- 保障 -->
		<u-popup v-model="showBrand" mode="bottom" :height="900" :safe-area-inset-bottom="true" :closeable="true">
				
				<view class=" server-modal">
					<view class="server-modal-box page_box">
						<view class="modal-head u-flex u-row-center u-col-center"><text class="head-title">品牌参数</text></view>
						<view class="modal-content content_box">
							<view class="serve-list" v-for="serve in goodsInfo.params" :key="serve.title">
								<view class="title-box u-flex">
									<!-- <image class="title-tag" :src="serve.image" mode=""></image> -->
									<text class="serve-title1">{{ serve.title }}</text>
									<text class="serve-title">{{ serve.content }}</text>
								</view>
								<view class="serve-detail">{{ serve.description }}</view>
							</view>
						</view>
						<view class="modal-foot u-flex u-row-center u-col-center" >
							<button class="u-reset-button serve-btn" @click.stop="showBrand = false">确定</button>
						</view>
					</view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import share from '@/shopro/share';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				// navbar
				backIconName: 'arrow-left',
				showGuarantee:false,
				showBrand:false,
				showSku: false, //是否显示规格弹窗
				currentSkuText: '', //选中规格
				detailType: '',
				showShare: false,
				buyType: 'sku',
				grouponBuyType: 'alone', //拼团购买方式。
				showEmpty: false,
				showEmptyText: '',
				showServe: false,
				goodsInfo: {},
				commentList: [], //商品评价列表
				commentNum: 0, //商品评价总数
				favorite: false,
				activityRules: {},
				currentSkuList: [],
				confirmGoodsInfo: {},
				swiperCurrent: 0, //轮播下标
				tabCurrent: 'tab0',
				users:{},
				tabList: [
					{
						id: 'tab0',
						title: '商品详情'
					},
					{
						id: 'tab1',
						title: '规格参数'
					},
					{
						id: 'tab2',
						title: '用户评价'
					}
				]
			}
		},
		// 是否登录
		computed: {
			...mapGetters(['isLogin', 'authType']),
		},
		async onLoad() {
			this.users=uni.getStorageSync("userInfo");
			let that = this;
			this.backIconName = getCurrentPages().length > 1 ? 'arrow-left' : 'home-fill';
			const type = this.$Route.query.type;
			console.log(this.$Route.query)
			this.detailType = type;
			switch (type) {
				case 'score':
					await this.getScoreDetail();
					break;
				default:
					await this.getGoodsDetail();
			}
			
			this.goodsInfo.current_discount=this.goodsInfo.current_discount/10
		},
		onUnload() {
			share.setShareInfo();
		},
		methods: {
			showSkuShow(){
				this.showSku = true
			},
			// goBack
			// 微信直播商品跳转详情，需要用小程序原生接口才能返回。
			goBack() {
				let pageList = getCurrentPages();
				if (pageList.length > 1) {
					// #ifdef MP-WEIXIN
					wx.navigateBack();
					// #endif
					// #ifndef MP-WEIXIN
					uni.navigateBack();
					// #endif
				} else {
					this.$Router.replaceAll('/pages/index/index');
				}
			},
			
			// 轮播图预览
			onGoodsSwiper(e) {
				this.$tools.previewImage(this.goodsInfo.images, e);
			},
			getActivityRules(e) {
				if (e) {
					this.activityRules = JSON.parse(e);
				}
			},
			// 检测
			checkActivity(data, type) {
				if (data) {
					return !data.includes(type);
				}
				return true;
			},
			// 路由跳转
			jump(path, parmas) {
				this.showShare = false;
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 回到首页
			goHome() {
				this.$Router.replaceAll('/pages/index/index');
			},
			
			// 选项卡
			onTab(id) {
				this.tabCurrent = id;
			},
			// 积分详情
			getScoreDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http('goods.scoreDetail', {
						id: that.$Route.query.id
					}).then(res => {
						if (res.code === 1) {
							that.goodsInfo = res.data;
							resolve(res.data);
						}
						if (res.code == 0) {
							resolve(false);
							that.$u.toast(res.msg);
						}
					});
				});
			},
			// 商品详情
			getGoodsDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http(
						'goods.detail',
						{
							id: that.$Route.query.id
						},
						'',
						false
					).then(res => {
						
						
						console.log(res.data)
						console.log("商品详情")
						if (res.code === 1) {
							that.showEmpty = false;
							that.goodsInfo = res.data;
							if (that.goodsInfo.activity_type) {
								that.activityRules.status = that.goodsInfo.activity.status_code;
							}
							share.setShareInfo({
								title: that.goodsInfo.title,
								desc: that.goodsInfo.subtitle,
								image: that.goodsInfo.image,
								params: {
									page: 2,
									pageId: that.$Route.query.id
								}
							});
							that.getCommentList();
							resolve(res.data);
						} else {
							resolve(false);
							// that.$u.toast(res.msg);
							that.showEmpty = true;
							that.showEmptyText = res.msg;
						}
					});
				});
			},
			// 商品评论
			getCommentList() {
				let that = this;
				that.$http('goods.commentList', {
					goods_id: that.goodsInfo.id,
					per_page: 3,
					type: 'all'
				}).then(res => {
					if (res.code === 1) {
						that.commentList = res.data.data;
						that.commentNum = res.data.total;
					}
				});
			},
			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
			},
			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},
			// 分享
			onShare() {
				this.showShare = true;
			},
			// 加入购物车
			addCart() {
				if (this.isLogin) {
					this.buyType = 'cart';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			// 立即购买
			goPay() {
				if (this.isLogin) {
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			// 拼团购买
			payGroupon(type) {
				if (this.isLogin) {
					if (type === 'groupon') {
						this.grouponBuyType = 'groupon';
					} else {
						this.grouponBuyType = 'alone';
					}
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			
			// 立即秒杀
			goSeckill() {
				!this.isLogin ? this.$store.dispatch('showAuthModal') : (this.showSku = true);
				this.buyType = 'buy';
			},
			
			// 收藏
			onFavorite(goodsId) {
				let that = this;
				that.$http('goods.favorite', {
					goods_id: goodsId
				}).then(res => {
					if (res.code === 1) {
						that.goodsInfo.favorite = res.data;
						that.$u.toast(res.msg);
					}
				});
			},
			// 切换收藏
			setsc(goodsId){
				let that = this;
				uni.$u.http.post('addons/shopro/goods/favorite',{
						goods_id: goodsId
				}).then(res =>{
					if(res==true){
						that.$u.toast("收藏成功");
						that.datas.favorite=true
					}else{
						that.$u.toast("取消成功");
						that.datas.favorite=false
					}	
					
				})
			},
			// 跳转优惠券
			lqtz(){
				uni.navigateTo({
					url:"../user/lingquan"
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.cpjg {
		padding: 34rpx 39rpx;
		/* width: calc(100% - 78rpx); */
		display: flex;
		align-items: center;
		background-image: url("https://s1.ax1x.com/2022/03/31/qRstld.png");
	}

	.cpjg>text {
		font-size: 24rpx;
		font-weight: 500;
		color: #7C7C7C;
		text-decoration: line-through;
	}

	.xin {
		font-size: 40rpx !important;
		font-weight: 800 !important;
		color: #333333 !important;
		text-decoration: none !important;
		margin-right: 27rpx;
	}
	.xin>text{
		font-size: 25rpx;
		color: #FF9A33;
	}
	.namel {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 0 20rpx;
		padding: 28rpx 20rpx;
		position: relative;
		/* width: calc(100% - 40rpx); */
	}

	.contents {
		padding-top: 10rpx;
	}

	.lqxx {
		display: flex;
		flex-wrap: wrap;
	}
	.sc{
		width: 50%;
	}
	.lqxx>view {
		padding: 6rpx 20rpx;
		background: #FCF4F5;
		font-size: 20rpx;
		font-weight: 500;
		color: #FF9A33;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.yxfx {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.yxfx image {
		width: 30rpx;
		height: 26rpx;
		margin-right: 9rpx;
	}
	
	.cplb /deep/ .u-indicator-item-round-active {
	background-color: #FF9A33 !important;
	}

	.cpname {
		max-width: 100%;
		margin: 30rpx 0 21rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.cpmiaosu {
		margin: 21rpx 0 60rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #888888;
	}

	.yxfx>view {
		font-size: 24rpx;
		font-weight: 400;
		color: #888888;
		display: flex;
		align-items: center;
	}

	.ggcs {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 28rpx 20rpx;
		/* width: calc(100% - 40rpx); */
	}

	.tzlq {
		position: absolute;
		right: 0;
		top: 20rpx;
		padding: 14rpx 20rpx;
		background: #FF9A33;
		border-radius: 25rpx 0rpx 0rpx 25rpx;
		display: flex;
		/* width: 80rpx; */
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.ggcsitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 51rpx;
	}

	.ggcsitem>view {
		display: flex;
		align-items: center;
	}

	.ggcsitem>view>text {
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
		margin-right: 20rpx;
		min-width: 80rpx;
	}

	.ggcsitem>view>view {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.spxqk{
		background: #FFFFFF;
		border-radius: 10rpx;
		width: calc(100% - 40rpx);
		padding: 30rpx 20rpx 98rpx;
		margin: 0 auto;
	}
	.huiyuze{
		margin-top: 20rpx;
		display: flex;
		align-items:center;
	}
	.huiyuze image{
		width: 30rpx;
		height:20rpx;
		margin-right: 10rpx;
	}
	.huiyuze>view{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx 10rpx;
		background: #FF9A33;
		border-radius: 20rpx;
		margin-right: 15rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}
	.sptitlt{
		position: relative;
		padding-left: 22rpx;
		width: calc(100% - 22rpx);
		margin-bottom: 29rpx;
	}
	.sptitlt::after{
		content: "";
		width: 10rpx;
		height: 31rpx;
		background: #FF9A33;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0,-50%);

	}
	.spcontent image{
		width: 100%;
	}
	.jrsc{
		display: flex;
		align-items: center;
		justify-content:space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		/* width: calc(100% - 76rpx); */
		padding: 0 38rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(14, 5, 10, 0.1);
	}
	.ss{
		display: flex;
		align-items: center;
		margin-right: 33rpx;
	}
	.ss > view {
		width: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.ss>view>view{
		font-size: 22rpx;
		font-weight: 400;
		color: #D0D0D2;
		display: flex;
	}
	.ss>view:first-of-type{
		margin-right: 43rpx;
		margin-left: 30rpx;
	}
	.ljgm{
		display: flex;
	
	}
	.ljgm>view{
		width: 210rpx;
		height: 70rpx;
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 32epx;
		font-weight: 500;
		color: #FFFFFF;
	}
	.ljgm>view:first-of-type{
		background: #FF9A33;
		opacity: 0.5;
		margin-right: 20rpx;
	}
	.ljgm>view:last-of-type{
		background: linear-gradient(89deg, #FF9A33 0%, #FF9A33 100%);
	}
	.nav-box {
		position: fixed;
		width: 100%;
		min-height: 140rpx;
		z-index: 888;
		top: 0;
		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
		}
		.back-hover {
			background-color: rgba(#fff, 0.18);
		}
		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}
	// 拼团玩法
	.groupon-play {
		background: #fff;
		line-height: 94rpx;
		.title {
			font-size: 28rpx;
			color: #999;
		}
	
		.description {
			font-size: 28rpx;
			width: 500rpx;
			margin-left: 30rpx;
		}
	}
	
	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 10rpx;
	
		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
	
			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}
	
			.line-active {
				background: rgba(168, 112, 13, 1);
			}
		}
	}
	
	// 选项卡内容
	.tab-detail {
		min-height: 300rpx;
		background: #fff;
		// 规格参数
		.goods-size {
			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);
	
				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);
					&:last-child {
						border-bottom: none;
					}
	
					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
					}
	
					.t-detail {
						font-size: 26rpx;
						border-left: 1rpx solid rgba(223, 223, 223, 1);
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}
		// 富文本
		.rich-box {
			/deep/ img {
				display: block;
			}
		}
		// 评论
		.goods-comment {
			.more-box {
				height: 100rpx;
				background: #fff;
	
				.more-btn {
					width: 200rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;
				}
			}
		}
	}
	
	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;
	
		.title {
			color: #999;
			margin-right: 20rpx;
		}
	}
	
	// 标题卡片
	.title-box {
		background-color: #fff;
		.goods-title {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 42rpx;
		}
	
		.sub-title {
			color: #a8700d;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
		}
	}
	
	// 底部工具栏
	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}
	.detail-foot_box {
		min-height: calc(100rpx + env(safe-area-inset-bottom)) ;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;
	
		.left,
		.detail-right {
			flex: 1;
		}
	
		.tools-item {
			flex: 1;
			height: 100%;
	
			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}
	
			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}
	
		.detail-btn-box {
			flex: 1;
	
			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				min-height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}
	
				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}
	
			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: #FF9A33;
				// opacity: 0.5;
				font-size: 32rpx;
			}
	
			.pay-btn {
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				background: #FF9A33;
				font-size: 32rpx;
			}
	
			.score-btn {
				width: 600rpx;
				line-height: 80rpx;
				background: #FF9A33;
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 40rpx;
				font-size: 32rpx;
	
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}
	
			.seckill-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
				font-size: 28rpx;
	
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}
	
			.seckilled-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;
	
				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}
	
			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}
	.serve-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 0;
	
		.title {
			font-size: 28rpx;
			color: #999;
			margin-right: 20rpx;
		}
	
		.tip {
			.tip-list {
				font-size: 28rpx;
				margin-right: 20rpx;
	
				.tip-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.server-modal-box {
		width: 750rpx;
		height: 100%;
		border-radius: 30rpx 30rpx 0 0;
		background: #fff;
		padding: 30rpx;
		.serve-btn {
			width: 690rpx;
			line-height: 80rpx;
			background: #FF9A33;
			border-radius: 40rpx;
			font-size: 30rpx;
			color: rgba(#fff, 0.9);
			margin-top: 40rpx;
		}
	
		.modal-head {
			margin-bottom: 30rpx;
			position: relative;
			.head-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	
		.modal-content {
			overflow-y: auto;
			.serve-list {
				padding-bottom: 40rpx;
	
				.title-tag {
					width: 38rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}
	
				.serve-title {
					width: calc(100% - 180rpx);
					font-size: 28rpx;
					// font-weight: bold;
				}
	
				.serve-detail {
					text-align: left;
					font-size: 26rpx;
					color: #999;
					line-height: 42rpx;
					padding-left: 58rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	.gguige{
		padding: 10rpx 20rpx;
		min-width: 150rpx !important;
		background: #FFF9F3 !important;
		border-radius: 10rpx !important;
		text-align: center !important;
		font-size: 28rpx !important;
		font-weight: 500 !important;
		color: #FF9A33 !important;
	}
	
	.serve-title1{
		width: 140rpx;
		margin-right: 40rpx;
	}
</style>
